<template>
  <div>
    <!-- 生成预览 -->
    <div class="generate absolute text-666 py-4 border-1 px-8">
      <div class="flex justify-between align-center">
        <div>生成预览</div>
        <close-outlined @click="close" />
      </div>
      <a-divider></a-divider>
      <div class="flex justify-between align-center">
        <div>随机代码</div>
        <a-input
          v-model:value="previewConfig.code"
          disabled
          style="width: 100px"
          size="small"
        ></a-input>
      </div>
      <a-divider class="my-3"></a-divider>
      <div class="flex gc-8">
        <div class="text-999 text-12 list-title">选择一项进行预览</div>
        <ScrollItem :height="200" class="flex-1">
          <ul class="flex flex-col file-list" v-if="treeData.length > 0">
            <li
              v-for="item in treeData"
              @click="selectData(item)"
              @dblclick="comfirm"
              :class="{ active: item.id === selectItem.id }"
            >
              {{ item.title }}
            </li>
          </ul>
          <div v-else class="flex flex-s">
            <InEmpty width="100" />
          </div>
        </ScrollItem>
      </div>
      <a-divider class="my-3"></a-divider>
      <div>
        <a-checkbox v-model:checked="projectMode.viewMode">显示描述信息</a-checkbox>
        <a-checkbox v-model:checked="projectMode.editMode"> 可编辑</a-checkbox>
      </div>
      <div class="mt-3">
        <a-button
          :disabled="selectItem.id == ''"
          type="primary"
          size="small"
          block
          @click="comfirm"
        >
          确定
        </a-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getTreeData } from "@/store/utils/project";
import { treeType } from "@/types/project";
import { computed, ref, watch } from "vue";
import ScrollItem from "@/views/components/ScrollItem.vue";
import InEmpty from "../components/InEmpty.vue";
import { projectMode } from "@/data/config";
import { preview, previewConfig } from "../bus/bin";

const emit = defineEmits(["onClose"]);
const close = () => {
  emit("onClose");
};
const treeData = computed(() => {
  return getTreeData();
});
const selectItem = ref({
  id: "",
  data: null as any
});
const comfirm = () => {
  preview(selectItem.value.data);
};
const selectData = (item: treeType) => {
  selectItem.value.id = item.id;
  selectItem.value.data = item;
};

/**
 * todo:预览界面
 *
 */
// const preview = () => {
//   var { code } = previewConfig;
//   previewUI({
//     code: code,
//     sourceData: selectItem.value.data,
//     viewMode: projectMode.viewMode,
//     editMode: projectMode.editMode
//   }).then((res: any) => {
//     previewConfig.showResult = true;
//     previewConfig.image = res.image;
//     previewConfig.url = res.url;
//     previewConfig.code = getUUID();
//   });
// };
</script>

<style lang="scss" scoped>
.generate {
  top: 60px;
  right: 16px;
  width: 400px;
  height: fit-content;
  background-color: white;
  box-shadow: 0 0 0 15px #b3b3b315;
  z-index: 100;
  .list-title {
    height: 32px;
    line-height: 32px;
    padding: 4px 8px;
  }
}
.file-list {
  padding: 2px;
  border: 1px solid #eee;
  margin-bottom: 8px;
  li {
    padding: 4px 8px;
    height: 32px;
    border-radius: 4px;
    border: 1px solid transparent;
    cursor: pointer;
    &:hover {
      background: #faad141f;
    }
    &.active {
      background: #faad141f;
      border: 1px solid #faad14;
    }
    margin-bottom: 4px;
    &:last-child {
      margin-bottom: 0;
    }
  }
}
</style>
